<template>
  <el-dialog v-model="visible" :title="title" width="1000" show-footer show-zoom resize @close="close">
    <template #default>
      <el-form ref="formRef" :rules="rules" :model="form" label-align="right" label-width="120" size="default">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="form-item">国家：<span>{{ form.address?.recipient_country }}</span></div>
          </el-col>
          <el-col :span="8">
            <div class="form-item">州省：<span>{{ form.address?.recipient_province }}</span></div>
          </el-col>
          <el-col :span="8">
            <div class="form-item">城市：<span>{{ form.address?.recipient_city }}</span></div>
          </el-col>
          <el-col :span="24">
            <div class="form-item">地址：<span>{{ form.address?.recipient_preferred_address }}</span></div>
          </el-col>
          <el-col :span="12">
            <div class="form-item">邮政编码：<span>{{ form.address?.recipient_zip_code }}</span></div>
          </el-col>
          <el-col :span="12">
            <div class="form-item">电话：<span>{{ form.address?.recipient_phone }}</span></div>
          </el-col>
          <el-col :span="12">
            <div class="form-item">包裹毛重：<span>{{ form.address?.weight }}</span></div>
          </el-col>
          <el-col :span="12">
            <div class="form-item">出库重量：<span>{{ form.address?.weight }}</span></div>
          </el-col>
        </el-row>
      </el-form>
      <vxe-table :data="form.details" :round="true" show-overflow :column-config="{resizable: true}" height="200">
        <vxe-column title="SKU">
          <template #default="{ row }">
            {{ row.sku }}
          </template>
        </vxe-column>
        <vxe-column field="name" title="图片">
          <template #default="{ row }">
            <div>
              <div class="image-item" v-for="(item,index) in row.image" :key="index"><img :src="item"></div>
            </div>
          </template>
        </vxe-column>
        <vxe-column field="sku_cn_title" title="名称">
          <template #default="{ row }">
            {{ row.sku_cn_title || '--' }}
          </template>
        </vxe-column>
        <vxe-column field="quantity" title="数量" width="80">
          <template #default="{ row }">
            {{ row.quantity || '--' }}
          </template>
        </vxe-column>
        <vxe-column field="location_code" title="货位" width="80">
          <template #default="{ row }">
            {{ row.location_code || '--' }}
          </template>
        </vxe-column>
      </vxe-table>
      <div>
        <div class="text-base py-2 font-medium">操作日志</div>
        <vxe-table :data="form.log_list" :round="true" show-overflow :column-config="{resizable: true}" height="200">
        <vxe-column title="包裹状态"  width="100">
          <template #default="{ row }">
            {{ row.op_status }}
          </template>
        </vxe-column>
        <vxe-column field="content" title="操作">
          <template #default="{ row }">
            {{ row.content || '--' }}
          </template>
        </vxe-column>
        <vxe-column field="op_time" title="操作时间" width="180">
          <template #default="{ row }">
            {{ row.op_time || '--' }}
          </template>
        </vxe-column>
        <vxe-column field="op_user_name" title="操作人" width="100">
          <template #default="{ row }">
            {{ row.op_user_name || '--' }}
          </template>
        </vxe-column>
      </vxe-table>
      </div>
    </template>

    <template #footer>
        <div class="flex justify-center py-2">
          <el-button type="" @click="close">关 闭</el-button>
        </div>
    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { getAlreadyDetail } from '../api/index'
import { getSKULocation } from '@/api/public'
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'

const visible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const emits = defineEmits(['query'])

const props = defineProps({
  wareDataList: {
    type: Array,
    default: [],
  },
})

const data = reactive({
  form: {},
  title: '',
  handleType: null,
})
const { form, title, handleType, rules } = toRefs(data)

const statusMap = new Map([
  ['edit', '包裹详情修改'],
  ['view', '包裹详情'],
])

const open = (type, id) => {
  title.value = statusMap.get(type)
  handleType.value = type
  visible.value = true
  if (id) getDetail(id)
}

const initForm = () => {
  form.value = getForm()
}
// 初始化
const getForm = () => {
  return {
    detail: []
  }
}

onMounted(() => {
  initForm()
})

const getDetail = async (id) => {
  try {
    const res = await getAlreadyDetail({
      id
    })
    form.value = res.data
  } catch (e) {
    throw Error(e)
  }
}


const deleteRow = (index) => {
  if (form.value.detail.length <= 1) return
  form.value.detail.splice(index, 1)
}

const save = () => {
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      loading.value = true
      const detail = form.value.detail.map(i=>{
        return{
          id: i.id,
          num: i.modify_num,
        }
      })
      const data = {
        id: form.value.id,
        detail
      }
      if (form.value.id) {
        orderDistribution(data)
          .then((res) => {
            ElMessage.success(res.message)
            emits('query')
            close()
          })
          .finally((e) => {
            loading.value = false
          })
      }
    }
  })
}

const close = () => {
  initForm()
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}
.image-item{
  width: 60px;
  height: 60px;
}
.form-item{
  padding: 6px 0;
  font-size: 16px;
  color: #333;
  span{
    color: #666
  }
}
</style>
